<template>
    <div class="fund">
        <el-row size="mini">
            <el-col :span="12" class="search-wrap">
                <el-row class="border-box">
                    <el-col :span="4" class="search-wrap">
                        范围属性：
                    </el-col>
                    <el-col :span="9" class="search-wrap">
                        <el-select placeholder="请选择" size="mini" style="width:100%"></el-select>
                    </el-col>
                </el-row>
                <el-row class="border-box">
                    <el-col :span="4" class="search-wrap">
                        <el-select size="mini" placeholder="请选择" style="width:100%"></el-select>
                    </el-col>
                    <el-col :span="5" class="search-wrap">
                        <el-select size="mini" placeholder="请选择" style="width:100%"></el-select>
                    </el-col>
                    <el-col :span="5" class="search-wrap">
                        <el-select size="mini" placeholder="请选择" style="width:100%"></el-select>
                    </el-col>
                    <el-col :span="4" class="search-wrap">
                        <el-select size="mini" placeholder="请选择" style="width:100%"></el-select>
                    </el-col>
                    <el-col :span="4" class="search-wrap">
                        <el-checkbox size="mini" style="margin-top:4px">单独控制</el-checkbox>
                    </el-col>
                    <el-col :span="2" class="search-wrap">
                        <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary"></el-button>
                    </el-col>
                </el-row>
                <el-row class="border-box">
                    <el-col :span="22" class="search-wrap">
                        <div class="tree-box">
                            <el-tree size="mini"></el-tree>
                        </div>
                    </el-col>
                    <el-col :span="2" class="search-wrap">
                        <el-button size="mini" icon="el-icon-check" type="primary"></el-button>
                        <div style="margin-top:10px">
                            <el-button size="mini" icon="el-icon-minus" type="danger"></el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
    name: 'FundScope',
    components: {},
})
export default class FundScope extends Vue {}
</script>
<style lang="scss" scoped>
.fund {
    color: #222;

    .search-wrap {
        padding: 5px 10px 5px 0;
    }

    .col-wrap:nth-child(1) {
        padding-right: 5px;
    }

    .col-wrap:nth-child(2) {
        padding-right: 5px;
    }

    .border-box {
        padding-left: 5px;
        border: 1px solid #eee;
        background: #f5f5f5;
        border-radius: 5px;
        border-bottom: none;
    }

    .border-box:nth-child(3) {
        border-bottom: 1px solid #eee;
    }

    .tree-box {
        overflow: auto;
        height: 150px;
        background: #fff;
        border: 1px solid #eee;
    }

    & /deep/ .el-button--mini,
    .el-button--mini.is-round {
        padding: 6px 15px;
    }
}
</style>
